<template>
    <template v-if="scrollEnable">
        <view class="dam-flex_column dam_sv_page">
            <view :class="'dam_v_header ' + (isFixZIndex ? 'zIndex' : '')">
                <slot name="header"></slot>
            </view>
            <scroll-view :scroll-top="scrollLocation" class="dam_sv_content" scroll-y :show-scrollbar="false"
                @scrolltolower="scrollToLower" @scrolltoupper="scrollToUpper" @scroll="scroll" :lower-threshold="0"
                :scroll-with-animation="isAnimation">

                <!--     <view v-if="headerHeight!==''" :style="{height:headerHeight,width:'100%'}">
            </view>
            <view v-else-if="headerHeight===''" style="visibility: hidden; z-index:-999;">
                <slot name="header"></slot>
            </view> -->
                <view class="dam-flex_column dam_v_content" :style="{ height: scrollEnable ? 'auto' : '100%' }">
                    <slot></slot>
                </view>
            </scroll-view>
            <view :class="'dam_v_footer ' + (isFixZIndex ? 'zIndex' : '')">
                <slot name="footer"></slot>
                <view v-if="safeBottomHeight && safeBottomHeight != ''" class="dam_v_safe_bottom">
                </view>
            </view>
        </view>
    </template>
    <template v-else>
        <view class="dam-flex_column dam_sv_page">
            <view :class="'dam_v_header ' + (isFixZIndex ? 'zIndex' : '')">
                <slot name="header"></slot>
            </view>
            <view class="dam-flex_column dam_sv_content">
                <slot></slot>
            </view>
            <view :class="'dam_v_footer ' + (isFixZIndex ? 'zIndex' : '')">
                <slot name="footer"></slot>
                <view v-if="safeBottomHeight && safeBottomHeight != ''" class="dam_v_safe_bottom">
                </view>
            </view>
        </view>
    </template>
</template>

<script lang="ts" setup>
import { ref, nextTick, watch } from 'vue';
const props = defineProps({
    // isFixHeader: {
    //     type: Boolean,
    //     default: false
    // },
    // isFixFooter: {
    //     type: Boolean,
    //     default: false
    // },
    /**
     * 是否可以滑动
     */
    scrollEnable: {
        type: Boolean,
        default: true
    },
    /**
     * 设置header的高度，用来避免覆盖
     */
    headerHeight: {
        type: String,
        default: '0px'
    },
    /**
     * footer的高度，用来避免覆盖
     */
    footerHeight: {
        type: String,
        default: '0px'
    },
    /**
     * 底部安全区域，默认是0，在h5中已有处理，主要是为了在设备HyBird开发中使用
     */
    safeBottomHeight: {
        type: String,
        default: '0px'
    },
    /**
     * 底部安全区域颜色，默认是白色
     */
    safeBottomColor: {
        type: String,
        default: 'white'
    },

    /**
     * fix的头部和底部是否设置zindex
     */
    isFixZIndex: {
        type: Boolean,
        default: false
    },

    /**
     * 是否滚动动画
     */
    isAnimation: {
        type: Boolean,
        default: false
    }
});
defineExpose({
    scrollToTop,
    scrollToBottom
});

const emits = defineEmits(['scrollToLower', 'scrollToUpper', 'scroll'])

//控制滑动位置
const scrollLocation = ref(1);

function scroll(e) {
    emits('scroll');
}

/**
 * 滑动到底部监听
 */
function scrollToLower() {
    emits('scrollToLower');
}
/**
 * 滑动到顶部监听
 */
function scrollToUpper() {
    emits('scrollToUpper');
}
/**
 * 滚动到顶部
 */
function scrollToTop() {
    scrollLocation.value = 1;
}

/**
 * 滚动到底部
 */
function scrollToBottom() {
    if (scrollLocation.value == 999999999999) {
        nextTick(() => {
            scrollLocation.value = 1000000000000;
        })
    } else {
        nextTick(() => {
            scrollLocation.value = 999999999999;
        })
    }
}
</script>

<style lang="scss">
@import "/dam_uni_frame/styles/dam_theme_common.scss";

.dam_sv_page {
    height: 100%;
    width: 100%;
    // margin-top: v-bind(headerHeight);
    position: relative;
}

.dam_sv_content {
    height: calc(100% - v-bind(safeBottomHeight) - v-bind(footerHeight) - v-bind(headerHeight));
    margin-top: v-bind(headerHeight);

    .dam_v_content {
        // height: 100%;
    }
}

// .dam_v_content {
// 	margin-top: v-bind(headerHeight);
// 	height: calc(100% - v-bind(safeBottomHeight) - v-bind(footerHeight) - v-bind(headerHeight));
// }

.dam_v_header {
    width: 100%;
    height: v-bind(headerHeight);
    position: absolute;
    top: 0;
}

.dam_v_header.zIndex {
    z-index: $z-index-top;
}

.dam_v_footer {
    width: 100%;
    height: v-bind(footerHeight);
    position: absolute;
    bottom: 0;
}

.dam_v_footer.zIndex {
    z-index: $z-index-bottom;
}

.dam_v_safe_bottom {
    height: v-bind('safeBottomHeight');
    background-color: v-bind('safeBottomColor');
}
</style>